﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="chat.aspx.cs" Inherits="ajax.chat" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#last').val(getlatest()-5);
            setInterval("getChats($('#last').val())", 1000);
            $('#mes').keypress(function (e) {
                if (e.which == 13) {
                    putChat();
                }
            });
        });
        function writeChat(chat)
        {
            $('#chat').append(chat+"\r\n");
        }
        function getlatest() {
            xmlreq = new XMLHttpRequest();
            xmlreq.open("GET", "process.aspx?type=last", null);
            xmlreq.send(null);
            return xmlreq.responseText;
        }
        function getChats(id) {
            xmlreq = new XMLHttpRequest();
            xmlreq.open("GET", "process.aspx?type=get&id=" + id, null);
            xmlreq.send(null);
            var data = xmlreq.responseXML;
            $(data).find("chat").each(function () {
                writeChat($(this).find("user").text() + ":" + $(this).find("mes").text());
                $('#last').val($(this).find("ID").text());
            });
//            var x = data.getElementsByTagName("chat");
//            for (var i = 0; i < x.length; i++) {
//                writeChat(x[i].getElementsByTagName("user")[0].childNodes[0].nodeValue+":"+x[i].getElementsByTagName("mes")[0].childNodes[0].nodeValue);
//                $('#last').val(x[i].getElementsByTagName("ID")[0].childNodes[0].nodeValue);
 //           }

        }
//        function ieAjaxBugFix(data) {
//            $("#_jqueryAjaxBugFix").remove();
//            $("body").append("<div id=\"_jqueryAjaxBugFix\"></div>");
//            $("#_jqueryAjaxBugFix").html(data);
//            return $("#_jqueryAjaxBugFix").html();
//        }

        function putChat() {
            var user = $('#user').val();
            if (user=='') {
                alert('no user');
                return;
            }
            var mes = $('#mes').val();
            if (mes == '') {
               
                return;
            }
            xmlreq = new XMLHttpRequest();
            xmlreq.open("GET", "process.aspx?type=add&user=" + user + "&mes=" + mes, null);
            xmlreq.send(null);
            $('#mes').val('');
        }
    </script>
    <style type="text/css">
        #TextArea1
        {
            height: 225px;
            width: 321px;
        }
        .style1
        {
            height: 23px;
        }
        #chat
        {
            height: 239px;
            width: 340px;
        }
        .style2
        {
        }
        .style3
        {
            height: 23px;
            width: 80px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <table style="width:100%;">
            <tr>
                <td class="style2" colspan="2">
                    <textarea id="chat" name="S1"></textarea></td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style3">
                    User:</td>
                <td class="style1">
                    <input id="user" type="text" /></td>
                <td class="style1">
                </td>
                <td class="style1">
                </td>
            </tr>
            <tr>
                <td class="style2">
                    Message:</td>
                <td>
                    <input id="mes" type="text" /><input id="send" type="button" value="send" onclick="putChat()" />
                    <input id="last" type="hidden" /></td>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
        </table>
    
    </div>
    </form>
</body>
</html>
